<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <link rel="stylesheet" type="text/css" href="../../css/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/cms/common/bootstrap-responsive.css"/>
    <link rel="stylesheet" href="../../plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .changeStatus {
            line-height: 10px;
        }

        .custom-label {
            padding: 0 !important;
            font-size: 12px;
            text-align: right;
        }

        .custom-label label {
            font-weight: lighter;
        }

        .modal .row {
            margin-bottom: 5px;
        }
    </style>
    <script type="text/javascript" src="../../js/common/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="../../js/common/bootstrap.js"></script>
    <script type="text/javascript" src="../../plugins/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript">

        /**
         * 表单序列化为json
         */
        $.fn.serializeObject = function() {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function() {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [ o[this.name] ];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };

        $(document).ready(function () {
            $("body").height(top.window.document.documentElement.offsetHeight - 105);
            loadFunctionTree();
        });

        function loadFunctionTree(){
            var setting = {
                check: {
                    enable: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onClick: zTreeOnClick
                }
            };

            var params = {url: "../../systemFunction/getSystemFunctions"};
            params.sucFn = function(data){
                $.fn.zTree.init($("#treeDemo"), setting, data.data);
            }
            requestJSON(params);
        }

        function saveModify(){
            var param = {url: '../../systemFunction/modifyFunction', async: false};
            param.data = JSON.stringify($('#functionModifyModel form').serializeObject());
            param.sucFn = function(data){
                if (data.code == '1') {
                    loadFunctionTree();
                } else {
                    alert('保存失败!错误信息：' + data.msg);
                }
            };
            requestJSON(param);
        }
        function zTreeOnClick(event, treeId, treeNode) {
            $("#functionId").val(treeNode.id)
            $("#functionCode").val(treeNode.functionCode);
            $("#functionName").val(treeNode.name);
            $("#functionUrl").val(treeNode.functionUrl);
            if(treeNode.isParent){
                $("#addSubBtn").show();
                $("#functionUrl").attr("disabled","disabled");
            }else{
                $("#addSubBtn").hide();
                $("#functionUrl").removeAttr("disabled");
            }
        };

        function addFunctionNode(){
            var parentId = $("#functionId").val();
            $("#parentId").val(parentId);
            $('#addFunctionModel').modal('show');
        }

        function saveFunction(){
            var param = {url: '../../systemFunction/addFunction', async: false};
            param.data = JSON.stringify($('#addFunctionModel form').serializeObject());
            param.sucFn = function(data){
                if (data.code == '1') {
                    $('#addFunctionModel').modal('hide');
                    loadFunctionTree();
                } else {
                    alert('保存失败!错误信息：' + data.msg);
                }
            };
            requestJSON(param);
        }

        /**
         * jQuery ajax请求
         */
        function requestJSON(param) {
            $.ajax({
                type : param.type ? param.type : 'POST',
                url : param.url,
                headers : param.header ? param.header : {'Accept' : 'application/json', 'Content-Type' : 'application/json'},
                dataType : param.dataType ? param.dataType : 'JSON',
                data : param.data,
                async : param.async ? true : false,
                contentType : param.contentType ? param.contentType : 'application/json',
                success : param.sucFn,
                error : param.ErrFn
            });
        }

    </script>
</head>
    <body>
        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span2">
                    <div class="zTreeDemoBackground left">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
                <div class="span10" id="functionModifyModel">
                    <form class="form-horizontal">
                        <input type="hidden" id="functionId" name="functionId"/>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">菜单编码：</label>
                            <div class="col-lg-10">
                                <input type="text" class="span3" id="functionCode" name="functionCode" disabled/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">菜单名称：</label>
                            <div class="col-lg-10">
                                <input type="text" class="span3" id="functionName" name="functionName" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">菜单链接：</label>
                            <div class="col-lg-10">
                                <input type="text" class="span5" id="functionUrl" name="functionUrl" />
                            </div>
                        </div>
                    </form>
                    <div class="modal-footer" id="btnGroup">
                        <button type="button" class="btn btn-primary" onclick="saveModify()">保存</button>
                        <button type="button" id="addSubBtn" class="btn btn-primary" onclick="addFunctionNode()">添加子菜单</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="addFunctionModel" tabindex="-1" role="dialog" aria-labelledby="txtModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-md">
                <div class="modal-content">

                    <div class="modal-header">
                        <button type="button" class="close">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title">添加功能菜单</h4>
                    </div>
                    <br>
                    <form class="form-horizontal">
                        <input type="hidden" class="form-control" id="parentId" name="parentId" />
                        <div class="form-group">
                            <label class="col-lg-2 control-label">菜单编码</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="addFunctionCode" name="addFunctionCode" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">菜单名称</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="addFunctionName" name="addFunctionName" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">菜单URL</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="addFunctionUrl" name="addFunctionUrl" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">控制类型</label>
                            <div class="col-lg-10">
                                <select class="input-small  form-control" id="type" name="type" disabled>
                                    <option value="1" selected>菜单</option>
                                    <option value="2">按钮</option>
                                </select>
                            </div>
                        </div>
                    </form>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" onclick="saveFunction();">保存</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>